import React, { useEffect, useRef, useState } from 'react';
import * as echarts from 'echarts';
import { Box } from '@alifd/next';
import { useStore } from '@/hooks';
import { observer } from 'mobx-react-lite';
import Styles from './SceneBar.module.scss';
import { t } from '@lingui/macro';

const _barWidth = '8%';

function OrdersInfo({ active }) {
  const chartRef = useRef(null);
  const { activityStore: store } = useStore();

  useEffect(() => {
    (async () => {
      const chartInstance = echarts.init(chartRef.current);
      const option = {
        xAxis: {
          type: 'category',
          data: active?.map((p) => p.sourceName),
          axisLabel: {
            rotate: 13, // 旋转45度
            fontSize: 12, // 减小字体大小
            interval: 0, // 强制显示所有标签
            align: 'center',
            margin: 40,
          },
        },
        yAxis: [
          {
            type: 'value',
            nameTextStyle: {
              fontSize: 14,
              padding: [0, 0, 10, 0],
            },
            splitNumber: 5,
            // nameLocation: 'middle',  // 将标题位置设置为中间
            nameGap: 15, // Y 轴标题和轴线之间的间距
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                width: 1,
                color: ['#ccc', '#ccc'],
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,
              },
            },
          },
        ],
        legend: {
          type: 'plain',
          data: ['销售金额', '活动成本'],
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          },
          textStyle: {
            color: 'black',
            align: 'left',
            fontWeight: 400,
            fontSize: 13,
          },
          backgroundColor: '#fff',
        },
        series: [
          {
            name: '销售金额',
            data: active?.map((p) => ({ value: p.saleCount })),
            type: 'bar',
            barWidth: _barWidth,
            yAxisIndex: 0,
          },
          {
            name: '活动成本',
            data: active?.map((p) => ({ value: p.costCount })),
            type: 'bar',
            barWidth: _barWidth,
            yAxisIndex: 0,
          },
        ],
      };
      chartInstance.setOption(option);
    })();
  }, [active]);

  return (
    <>
      <Box style={{ padding: 10 }}>
        <Box direction="row" align="center">
          <div className={Styles.title}>{t`活动业绩统计:`}</div>
        </Box>
        <div ref={chartRef} style={{ height: '400px', width: '85vw' }} />
      </Box>
    </>
  );
}

export default observer(OrdersInfo);
